<template>
	<view>
		<view class="padding text-bold text-lg">
			油卡类型
		</view>
		
		<radio-group class="block" @change="RadioChange">
			<view class="cu-form-group">
				<view class="title flex align-center">
					<image style="width: 70rpx;height: 70rpx;" src="../../static/images/g5.png" mode=""></image>
					<text class="margin-left">中国石化</text>
				</view>
				<radio :class="radio=='中国石化'?'checked':''" :checked="radio=='中国石化'?true:false" value="中国石化"></radio>
			</view>
			<view class="cu-form-group">
				<view class="title flex align-center">
					<image style="width: 70rpx;height: 70rpx;" src="../../static/images/g4.png" mode=""></image>
					<text class="margin-left">中国石油</text>
				</view>
				<radio :class="radio=='中国石油'?'checked':''" :checked="radio=='中国石油'?true:false" value="中国石油"></radio>
			</view>
		</radio-group>
		
		<view class="padding"></view>
		<view class="padding text-bold text-lg">
			卡片信息
		</view>
		
		<view class="block">
			<view class="cu-form-group">
				<input placeholder="请输入油卡卡号" v-model="form.card_no" name="input"></input>
			</view>
			<view class="cu-form-group">
				<input placeholder="请输入持卡姓名" v-model="form.holder_name" name="input"></input>
			</view>
			<view class="cu-form-group">
				<input placeholder="请输入验证码" name="input" v-model="form.code"></input>
				<button class="cu-btn bg-black shadow" :disabled="num != '验证码'" @click="getCode">{{num}}</button>
			</view>
		</view>
		<view class="padding text-xs">
			说明：请认真核对卡号，确保准确无误
		</view>
		
		
		<view class="add-btn" @click="submit">确认{{id?'修改':'添加'}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: '中国石化',
				flag: 1,
				num: '验证码',
				id: '',
				form: {
					type: '中国石化',
					card_no: '',
					holder_name: '',
					code: ''
				}
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				this.getData(opt.id);
			}
		},
		methods: {
			RadioChange(e) {
				this.radio = e.detail.value
				this.form.type = e.detail.value
			},
			countDown() {
				if (this.flag) {
					this.flag = 0
					this.num = 60
				}
				this.num = this.num - 1
				if (this.num == 0) {
					this.flag = 1
					this.num = '验证码'
					return;
				} else {
					setTimeout(() => {
						this.countDown()
					}, 1000)
				}
			},
			getCode() {
				this.countDown();
				this.$u.post('/passport/getCode', {
					is_login: 1,
					type: 'oilcardadd'
				}).then(res => {
					this.$msg(res.data.msg)
				})
			},
			submit() {
				if (this.id) {
					this.editCard();
				} else {
					this.addCard();
				}
			},
			editCard() {
				this.$u.post('/card/oil/update', this.form).then(res => {
					this.$msg('操作成功')
					setTimeout(() => {
						this.$goto(1)
					}, 500)
				})
			},
			addCard() {
				this.$u.post('/card/oil', this.form).then(res => {
					this.$msg('操作成功')
					setTimeout(() => {
						this.$goto(1)
					}, 500)
				})
			},
			getData(id) {
				this.$u.get('/card/oil/detail?id='+id).then(res => {
					this.form = res.data.result.oil_card
					this.radio = res.data.result.oil_card.type
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.block .cu-form-group:nth-last-of-type(1) {
		border-bottom: 1upx solid #eee;
	}

	.add-btn {
		width: 100%;
		height: 100rpx;
		background: #1f1f1f;
		color: white;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		letter-spacing: 2rpx;
		position: fixed;
		bottom: 0;
	}
</style>
